<route lang="json5" type="login">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登陆',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import DOMPurify from 'dompurify'
import { ref } from 'vue'
import { login } from '@/api/login'
import { httpGet } from '@/utils/http'

defineOptions({
  name: 'Result',
})
const model = reactive<{
  LoginName: string
  UserPwd: string
}>({
  LoginName: '',
  UserPwd: '',
})
const rules = {
  LoginName: [
    { required: true, message: '请输入账号或手机号' },
  ],
  UserPwd: [
    { required: true, message: '请输入登陆密码' },
    { required: true, pattern: /^[a-z0-9]{6,12}$/i, message: '请输入6-12位数字或字母' },
  ],
}

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      loginSubmit()
      // uni.switchTab({
      //   url: '/pages/index/index',
      // })
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

function loginSubmit() {
  const params = {
    LoginOut: 'login',
    LoginName: form.value.LoginName,
    UserPwd: form.value.UserPwd,
  }
  login(params).then((res) => {
    console.log(res)
  })
}

const tempHtml = ref('')
httpGet('/service_agr_FWXY.php', {}, { contentType: 'text/html; charset=UTF-8' })
  .then((res: any) => {
    console.log('登陆成功', res)
    tempHtml.value = res.html ? DOMPurify.sanitize(res.html) : ''
  })
  .catch((err) => {
    console.error('登陆失败', err)
  })

const show = ref(false)
function handleClose() {
  show.value = false
}

function jumpTo(url: string) {
  uni.navigateTo({
    url,
  })
}
</script>

<template>
  <view class="pages">
    <view class="logo">
      <wd-img :width="100" :height="100" mode="widthFix" src="/src/static/images/logo.png" />
    </view>
    <wd-form ref="form" class="i-form" :model="model">
      <wd-cell-group>
        <wd-input
          v-model="model.LoginName"
          class="i-border-b"
          label="账号"
          label-width="100px"
          prop="LoginName"
          clearable
          placeholder="账号或手机号"
          :rules="[{ required: true, message: '请输入账号或手机号' }]"
        />
        <wd-input
          v-model="model.UserPwd"
          class="i-border-b"
          label="密码"
          label-width="100px"
          prop="UserPwd"

          clearable show-password
          placeholder="请输入登录密码"
          :rules="[{ required: true, message: '请输入登录密码' }]"
        />
      </wd-cell-group>
      <navigator
        class="i-link"
        url="/pages/login/login_sms"
      >
        找回密码
      </navigator>

      <view class="btn-group">
        <view class="flex">
          <icon-font icon="icon-wechat" size="45rpx" color="#07C160" class="mr-[20rpx]" />
          <icon-font icon="icon-message" size="45rpx" color="#07C160" />
        </view>
        <wd-button class="i-btn" type="primary" size="large" block @click="handleSubmit">
          登录
        </wd-button>
        <wd-button class="i-btn" plain size="large" block @click="jumpTo('/pages/register/register')">
          注册
        </wd-button>
      </view>
    </wd-form>
  </view>
  <view class="footer">
    <view>登陆即代表你阅读并同意</view>
    <view>
      <text class="i-link" @click="show = true">
        服务协议
      </text>、<text class="i-link" @click="show = true">
        隐私协议
      </text>和<text class="i-link" @click="show = true">
        增值服务协议
      </text>
    </view>
    <view>物联云 - 商户管理系统 (v5.0)</view>
  </view>
  <wd-popup v-model="show" custom-style="border-radius:32rpx;width:80%;height:80%;" @close="handleClose">
    <view class="pop-content">
      <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
      <view class="deal" v-html="tempHtml" />
      <view class="border-b py-20rpx text-align-center">
        <view>
          <wd-icon name="check-circle" size="12px" color="#07C160" />
          <text class="text-[#07C160]">
            我已阅读并同意
          </text>
          <text class="i-link">
            《服务协议》
          </text>
        </view>
        <view>
          <text class="i-link">
            《隐私协议》
          </text>
          <text class="i-link">
            《增值服务协议》
          </text>
        </view>
      </view>
      <wd-button class="i-btn" type="primary" size="small" block @click="show = false">
        确认
      </wd-button>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
    page{
        background-color: #fff;
    }
    .pages {
        width: 100%;
        overflow-x: hidden;
        background: url('http://mch.longze.net.cn/static/images/top_bg.png') top left no-repeat;
        background-size: 100%;
        background-color: #fff;
        .logo {
            padding-top: 70rpx;
            padding-bottom: 200rpx;
            text-align: center;
        }
        .i-form{
            padding: 0 10%;
            .i-link {
                color:$uni-color-primary;
                font-size: 28rpx;
                text-align: right;
                padding: 4px 0;
            }
        }
        .btn-group{
            padding-top: 60rpx;
        }
        .i-border-b {
            border-bottom: 1px solid #e5e5e5;
        }
        .wd-button{
            height: 70rpx !important;
            font-size: 28rpx !important;
            margin-top: 20rpx;
        }
    }
    .footer{
      width: 100%;
      position: absolute;
      bottom: calc(30rpx + env(safe-area-inset-bottom));
      text-align: center;
      font-size: 24rpx;
    }
    .pop-content {
      padding: 30rpx;
      font-size: 28rpx;
      line-height: 1.5;
      color: #333;
      text-align: justify;
      font-size: 24rpx;
      .deal{
        height: 700rpx;
        padding: 20rpx;
        border: 1px solid #eee;
        border-radius: 10rpx;
        overflow-y: auto;
      }
      .border-b{
        border-bottom: 1px solid #eee;
      }
    }
</style>
